<template>
    <div
        class="applyList"
        v-loading="tableLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <!-- 分期申请记录 -->
        <el-card class="box-card">
            <div slot="headerss" class="clearfix">
                <span>分期申请记录</span>
            </div>
            <div class="container">
                <el-table :data="tableData" stripe border class="heard-bg business_table">
                    <el-table-column
                        v-for="(item, index) in tableColumn"
                        :key="index"
                        :label="item.label"
                    >
                        <template slot-scope="scope">
                            <span
                                v-if="item.value === 'INPDATE' || item.value === 'AUTHDAY' || item.value === 'MATCHDAY'"
                            >{{ scope.row[item.value] | getFomatDate }}</span>
                            <span
                                v-else-if="item.value === 'STATUS'"
                            >{{ scope.row.STATUS | getStatusText(statusList) }}</span>
                            <span
                                v-else-if="item.value === 'INPSRC'"
                            >{{ scope.row.INPSRC | getStatusText(sourceList) }}</span>
                            <span v-else>{{ scope.row[item.value] }}</span>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="footer">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleGetAppData('pre')"
                        :disabled="curApprefIndex <= 0"
                    >上一页</el-button>
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleGetAppData('next')"
                        :disabled="!appNextButton"
                    >下一页</el-button>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { getDictSelectList } from '@/utils/Common'

export default {
    name: 'applyList',
    data() {
        return {
            tableLoading: false, // 表格loading
            statusList: [], // 申请状态 映射列表
            sourceList: [], // 申请来源 映射列表
            tableData: [], // 分期申请记录查询表格数据
            apprefList: [], // 分期付款申请编号(只存每页最后一条记录)
            curApprefIndex: '', // 分申请记录列表 -- 当前页最后一条记录的申请编号的索引
            appNextButton: false, // ‘下一页’  按钮的显示控制阀
            tableColumn: [
                {
                    label: '申请录入日期',
                    value: 'INPDATE'
                },
                {
                    label: '商品编号',
                    value: 'PRPRDID'
                },
                {
                    label: '商品名称',
                    value: 'PRONAME'
                },
                {
                    label: '商品金额',
                    value: 'MPAMT'
                },
                {
                    label: '期数',
                    value: 'NBRMTHS'
                },
                {
                    label: '状态',
                    value: 'STATUS'
                },
                {
                    label: '申请来源',
                    value: 'INPSRC'
                },
                {
                    label: '授权日期',
                    value: 'AUTHDAY'
                },
                {
                    label: '请款日期',
                    value: 'MATCHDAY'
                }
            ], // 分期付款表格 展示项
        }
    },

    // 取缓存信息
    computed: mapState({
        3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag // 是否密码检查标志 
    }),

    mounted() {
        this.init()
    },

    filters: {
        // 状态转译
        getStatusText(val, list) {
            let text = ''
            list.forEach(item => {
                if (item.code === val) {
                    text = item.label
                    return
                }
            })
            return text
        },

        // 日期格式转换
        getFomatDate(val) {
            let time = '--'
            if (val && val.trim()) {
                time = moment(val + '').format('YYYY-MM-DD')
            }
            return time
        }
    },

    methods: {
        // 初始化执行
        async init() {
            // 获取申请状态
            this.statusList = await getDictSelectList('MPAPPSTATUS', this)

            // 获取申请状态
            this.sourceList = await getDictSelectList('INPSRC', this)

            // 获取申请记录查询列表数据
            await this.getAppData()

        },

        // 获取分期付款申请记录数据 -- 3046 交易
        async getAppData() {
            this.tableLoading = true
            const appBody = {
                CARDNBR: this[3004].CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.pinFlag, // 是否检查密码标志 
                RTNIND: this.apprefList.length === 0 ? '' : 1, // 翻页标志 首次传空， 翻页传1
                APPREF: this.apprefList.length === 0 ? '' : this.apprefList[this.curApprefIndex], // 首次查询上送空；下翻页查询时 上送最后一条记录中的分期付款申请编号；
            }
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams))
            defaultParams.body.appHead.tranCode = '3046'
            defaultParams.body.appBody = appBody

            // 跑 3046 交易
            this.$post.common.transPort(defaultParams).then(res => {
                this.tableLoading = false
                if (res.status === 200) {
                    let result = JSON.parse(res.data.jsonRes)
                    console.log(result, '响应数据 -- 3046')
                    if (result.sysHead.rspCd === '000000') { // 判断交易是否成功
                        this.tableData = result.body.appBody.dataList || []
                        // 判断此次查询数据最后一条记录申请编号是否在已有列表中  没有- 添加
                        const currentAppref = result.body.appBody.dataList[result.body.appBody.dataList.length - 1].APPREF
                        this.appNextButton = result.body.appBody.dataList.length < 10 ? false : true
                        if (!this.apprefList.includes(currentAppref)) {
                            this.apprefList.push(currentAppref)
                            // 保存 当前页最后一条记录的申请编号的索引
                            this.curApprefIndex = this.apprefList.length - 1
                        } else { // 已存在
                            this.apprefList.forEach((item, index) => {
                                if (item === currentAppref) {
                                    this.curApprefIndex = index
                                    return
                                }
                            })
                        }
                    } else {
                        const errorMsg = '错误代码：' + result.sysHead.rspCd + ', 错误信息：' + result.sysHead.rspMsg
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error'
                        })
                    }
                } else {
                    this.tableLoading = false
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error'
                    })
                }

            })
        },

        // 分期申请记录 页码切换
        handleGetAppData(type) {
            if (type === 'pre') { // 切换到上一页
                if (this.curApprefIndex - 2 < 0) {
                    this.apprefList = [] // 清空缓存 申请编号 -> 相当于首次查询
                } else {
                    this.curApprefIndex = this.curApprefIndex - 2
                }
                this.getAppData()
            } else { // 切换到下一页    
                this.getAppData()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
</style>